<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
	<meta charset="UTF-8">
	<title>文档标题</title>
	<!-- 优先使用 IE 最新版本和 Chrome -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<!-- 开启响应式 -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
	
	<!-- SEO页面关键词 -->
	<meta name="keywords" content="your keywords" />
	
	<!-- SEO页面描述 -->
	<meta name="description" content="your description" />
	<style>
		html{font-size: 625%;}
		body{font-size: .12rem;/*12px*/
	</style>
	
</head>
<body>
	
</body>
</html>
<!-- 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable=no  禁止用户手动缩放
 -->

<!-- 
自适应单位(px, em, rem)
px: 在web页面初期的制作中，我们会使用px来设置我们的文档，它比较稳定和精确
em：浏览器中放大或者缩小的时候，em能改变大小，但是大小受从父元素继承过来的字体大小影响
rem：浏览器中放大或者缩小的时候，rem能改变大小，大小随着根元素的改变而改变

用法
html{
	font-size: 625%;  100 / 16 * 100%
}
100px = 1rem

 -->

<!-- 
网站应该做多宽：
	
 -->

 <!-- 
媒体查询
@media{}
链接引用方式
	<link rel="stylesheet" media="screen and (min-width: 1200px)" href="css/green.css">
@media screen and (min-width: 600px) and (min-width: 600px){
	选择器:{
		属性: 属性值
	}
}


  -->

<!-- 
	瀑布流设计
1、column-count 把div中的文本分为多少列

2、column-width 规定列宽

3、column-gap 规定列间隙

4、 -webkit-break-inside: avoid;
	break-inside: avoid; 避免元素内部断行并产生新列
 -->

 <!-- 
弹性盒模型
box-sizing: content-box设置的宽高未内容宽高
			border-box设置的宽高包含了边框和内边距

伸缩性盒模型(Flexible-box)
display：flex
	容器属性flex-flow
		flex-direction:(row) column主轴的方向
			row-reverse从右往左column-reverse从下往上
		flex-wrap:换行方式
			(nowrap) wrap正常换行 wrap-reverse换行后的第二行到原来那行的前面
		justify-content:对齐方式
			(flex-start)左对齐 | flex-end右对齐 | center居中 | space-between两端对齐，每项间隔都相等 | space-around边缘间隔相等，中间间隔是边缘间隔的两倍
		align-items
			flex-start: 项目顶部对齐
			flex-end: 项目底部对齐
			center: 居中对齐
			baseline: 项目的第一行文字的基线对齐
			stretch: 如果项目未设置高度具体的高度，那么将占据整个容器的高度
		align-content: 定义多根轴线的对齐方式
			flex-start:
			flex-end:
			center:
			space-between:
			space-around:
	项目属性 flex
		order: 定义项目的排列顺序，数值越小排的越前，默认为0
		flex-grow: 定义项目的放大比例，默认为0，增加行内剩余空间的倍数
		flex-shrink: 定义项目的缩小比例，默认为1，若空间不足，则缩小
		flex-basis:	设定宽度

		align-self: 可以覆盖align-items
			auto
			flex-start
			flex-end
			center
			baseline
			stretch

  -->